<template>
  <!-- 分页效果还没有完成 -->
  <div class="paging clearfix">
    <div class="left-paging">
      每页显示
      <select class="select select-paging" v-model="pageSize">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
      </select>
      条数据,
      当前是第&nbsp;<span>{{ curPage }}</span>&nbsp;页,
      共&nbsp;<span>{{ totalPage }}</span>&nbsp;页,
      共&nbsp;<span>{{ total }}</span>&nbsp;条数据
    </div>
    <div class="right-paging" id="right">
      <button class="btn btn-paging">首页</button>
      <button class="btn btn-paging">上一页</button>
      <span id="paging"></span>
      <button class="btn btn-paging" v-for="(item,key) in totalPage" :key="key">{{ item }}</button>
      <button class="btn btn-paging">下一页</button>
      <button class="btn btn-paging">末页</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'paging',
  props: {
    curPage: Number, // 当前页码
    totalPage: Number, // 总页数
    total: Number, // 数据总数
    pageSize: Number // 每页显示几条
  },
  data () {
    return {
      pagingDivInnerHTML: ''
    }
  },
  methods: {
    pagingConstruct (paging) {
      let total = this.totalPage
      // let pagingDivInnerHTML = ''
      let isHiddenExist = 0
      for (var i = 1; i <= total; i++) {
        if (i === paging) {
          this.pagingDivInnerHTML += `<button class="btn btn-paging active">${i}</button>`
        } else {
          if (i < 4 || (i < paging + 3 && i > paging - 3) || (i > total / 2 - 2 && i < total / 2 + 2) || i > total - 3) {
            // this.pagingDivInnerHTML += `<button class="btn btn-paging" @click="pagingConstruct(${i})">${i}</button>`
            this.createPaging(i)
            isHiddenExist = 0
          } else {
            if (isHiddenExist === 0) {
              this.pagingDivInnerHTML += '...'
              isHiddenExist = 1
            }
          }
        }
      }
      document.getElementById('paging').innerHTML = this.pagingDivInnerHTML
    },

    createPaging (i) {
      this.pagingDivInnerHTML += `<button class="btn btn-paging" @click="pagingConstruct(${i})">${i}</button>`
    }
  },
  mounted () {
    this.pagingConstruct(1)
  }
}
</script>

<style>
.paging {
  margin: 12px 0;
}
.left-paging {
  float: left;
  color: #616161;
}
.left-paging span {
  font-size: 14px;
}
.right-paging {
  float: right;
}
.btn-paging {
  width: auto;
  height: auto;
  line-height: normal;
  font-size: 12px;
  padding: 5px 10px;
  display: inline-block;
  margin-right: 5px;
  background-color: #d8d8d8;
  color: #616161;
  border: 1px solid #a5a5a5;
  box-sizing: border-box;
  box-shadow: none;
}
.btn-paging:hover,
.btn.active {
  background-color: #4a88c2;
  color: #fff;
  border: 1px solid #4784bd;
}
.select-paging {
  width: 50px;
}
</style>
